<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>合同预览</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
    <script>
        tailwind.config = {
                    theme: {
                        extend: {
                            colors: {
                                primary: '#165DFF',
                                secondary: '#6B7280',
                                success: '#00B42A',
                                warning: '#FF7D00',
                                danger: '#F53F3F',
                                info: '#86909C',
                                light: '#F2F3F5',
                                highlight: '#E6F7FF',
                            },
                            fontFamily: {
                                sans: ['Inter', 'system-ui', 'sans-serif'],
                            },
                        }
                    }
                }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            }
            .bg-gradient-primary {
                background-image: linear-gradient(135deg, #165DFF 0%, #0F4CD4 100%);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
<div class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 顶部区域 -->
    <header class="mb-8">
        <div
                class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6"
        >
            <div>
                <h1
                        class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2"
                >
                    采购合同
                </h1>
                <p class="text-gray-500 flex items-center">
                    <i class="fas fa-hashtag mr-2 text-primary"> </i>
                    合同编号:
                    <span class="font-medium ml-1"> HT20230915001 </span>
                </p>
            </div>
            <div class="flex gap-3">
                <button
                        class="flex items-center justify-center px-5 py-2.5 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary/50"
                        id="downloadPdfBtn"
                >
                    <i class="fas fa-download mr-2"> </i>
                    下载PDF
                </button>
                <button
                        class="flex items-center justify-center px-5 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg shadow-sm hover:bg-gray-50 transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-gray-200"
                        id="backBtn"
                >
                    <i class="fas fa-arrow-left mr-2"> </i>
                    返回
                </button>
            </div>
        </div>
    </header>
    <!-- 合同内容区域 -->
    <main
            class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg"
    >
        <div class="p-6 md:p-8">
            <!-- 合同头部信息 -->
            <div class="mb-8">
                <div class="flex flex-col md:flex-row justify-between mb-6">
                    <div class="mb-6 md:mb-0 md:mr-6">
                        <h2
                                class="text-lg font-semibold mb-3 text-gray-700 border-b pb-2 border-gray-200"
                        >
                            甲方（采购方）
                        </h2>
                        <p class="mb-2">
                            <span class="text-gray-500"> 公司名称： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    北京科技有限公司
                  </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 统一社会信用代码： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    91110108XXXXXXXXXX
                  </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 法定代表人： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded"> 张三 </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 联系人： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded"> 李四 </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 联系电话： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    13800138000
                  </span>
                        </p>
                        <p>
                            <span class="text-gray-500"> 地址： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    北京市海淀区中关村科技园区8号楼
                  </span>
                        </p>
                    </div>
                    <div>
                        <h2
                                class="text-lg font-semibold mb-3 text-gray-700 border-b pb-2 border-gray-200"
                        >
                            乙方（供应方）
                        </h2>
                        <p class="mb-2">
                            <span class="text-gray-500"> 公司名称： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    上海电子设备有限公司
                  </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 统一社会信用代码： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    91310115YYYYYYYYYY
                  </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 法定代表人： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded"> 王五 </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 联系人： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded"> 赵六 </span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500"> 联系电话： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    13900139000
                  </span>
                        </p>
                        <p>
                            <span class="text-gray-500"> 地址： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    上海市浦东新区张江高科技园区15号楼
                  </span>
                        </p>
                    </div>
                </div>
                <div
                        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6"
                >
                    <div>
                        <p class="mb-2">
                            <span class="text-gray-500"> 签订日期： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    2023年09月15日
                  </span>
                        </p>
                    </div>
                    <div>
                        <p class="mb-2">
                            <span class="text-gray-500"> 合同有效期： </span>
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    2023年09月15日 至 2024年09月14日
                  </span>
                        </p>
                    </div>
                </div>
            </div>
            <!-- 合同正文 -->
            <div class="space-y-8">
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        一、采购物品信息
                    </h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full border border-gray-200">
                            <thead>
                            <tr class="bg-gray-50">
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    序号
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    产品名称
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    规格型号
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    单位
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    数量
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    单价（元）
                                </th>
                                <th
                                        class="py-3 px-4 border-b text-left text-sm font-semibold text-gray-600"
                                >
                                    金额（元）
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 border-b text-sm">1</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    高性能笔记本电脑
                                </td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    ThinkPad X1 Carbon Gen 10
                                </td>
                                <td class="py-3 px-4 border-b text-sm">台</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">5</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    12,999.00
                                </td>
                                <td class="py-3 px-4 border-b text-sm font-medium">
                                    64,995.00
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 border-b text-sm">2</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    27英寸显示器
                                </td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    Dell UltraSharp U2723QE
                                </td>
                                <td class="py-3 px-4 border-b text-sm">台</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">5</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    4,299.00
                                </td>
                                <td class="py-3 px-4 border-b text-sm font-medium">
                                    21,495.00
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 border-b text-sm">3</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    无线鼠标键盘套装
                                </td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    Logitech MX Master 3 + MX Keys
                                </td>
                                <td class="py-3 px-4 border-b text-sm">套</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">5</td>
                                <td class="py-3 px-4 border-b text-sm bg-highlight">
                                    1,599.00
                                </td>
                                <td class="py-3 px-4 border-b text-sm font-medium">
                                    7,995.00
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr class="bg-gray-50">
                                <td
                                        class="py-3 px-4 border-t text-right text-sm font-semibold"
                                        colspan="5"
                                >
                                    合计：
                                </td>
                                <td class="py-3 px-4 border-t text-sm font-semibold">
                                    人民币（大写）：
                                </td>
                                <td
                                        class="py-3 px-4 border-t text-sm font-bold text-primary"
                                >
                                    玖万肆仟肆佰捌拾伍元整（¥94,485.00）
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        二、交货信息
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <p class="mb-3">
                                <span class="text-gray-500"> 交货方式： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      乙方送货上门
                    </span>
                            </p>
                            <p class="mb-3">
                                <span class="text-gray-500"> 交货地点： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      北京市海淀区中关村科技园区8号楼5层501室
                    </span>
                            </p>
                            <p class="mb-3">
                                <span class="text-gray-500"> 收货人： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded"> 李四 </span>
                            </p>
                            <p>
                                <span class="text-gray-500"> 联系电话： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      13800138000
                    </span>
                            </p>
                        </div>
                        <div>
                            <p class="mb-3">
                                <span class="text-gray-500"> 预计发货时间： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      2023年09月18日
                    </span>
                            </p>
                            <p class="mb-3">
                                <span class="text-gray-500"> 预计到货时间： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      2023年09月20日
                    </span>
                            </p>
                            <p>
                                <span class="text-gray-500"> 运输方式： </span>
                                <span class="bg-highlight px-1 py-0.5 rounded">
                      顺丰速运（保价）
                    </span>
                            </p>
                        </div>
                    </div>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        三、付款方式
                    </h2>
                    <p class="mb-3">
                        <span class="text-gray-500"> 付款方式： </span>
                        <span class="bg-highlight px-1 py-0.5 rounded"> 电汇 </span>
                    </p>
                    <p class="mb-3">
                        <span class="text-gray-500"> 付款条件： </span>
                        <span class="bg-highlight px-1 py-0.5 rounded">
                  甲方收到货物并验收合格后30日内支付全部货款
                </span>
                    </p>
                    <p>
                        <span class="text-gray-500"> 甲方银行账户： </span>
                        <span class="bg-highlight px-1 py-0.5 rounded">
                  中国工商银行北京中关村支行 62220202000XXXXXXXX
                </span>
                    </p>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        四、验收标准
                    </h2>
                    <p class="mb-3">
                        1.
                        乙方所提供产品必须为全新、未拆封的原装正品，符合国家相关质量标准及生产厂家质量标准。
                    </p>
                    <p class="mb-3">
                        2.
                        甲方在收到货物后7个工作日内进行数量和外观质量验收，如有异议应在验收期内书面通知乙方，否则视为验收合格。
                    </p>
                    <p>
                        3.
                        产品质量保证期为自甲方验收合格之日起12个月，在质保期内如产品出现质量问题，乙方应按照生产厂家售后服务标准提供免费维修或更换服务。
                    </p>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        五、双方责任与义务
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <h3 class="font-medium text-gray-700 mb-2">
                                甲方责任与义务：
                            </h3>
                            <ul class="list-disc pl-5 space-y-1 text-gray-600">
                                <li>按照合同约定及时支付货款</li>
                                <li>提供准确的交货地址和联系人信息</li>
                                <li>按照合同约定及时进行货物验收</li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-2">
                                乙方责任与义务：
                            </h3>
                            <ul class="list-disc pl-5 space-y-1 text-gray-600">
                                <li>按照合同约定的产品规格、数量和时间提供合格产品</li>
                                <li>负责产品运输及运输过程中的风险</li>
                                <li>提供产品相关的资料，包括产品合格证、使用说明书等</li>
                                <li>按照合同约定提供售后服务</li>
                            </ul>
                        </div>
                    </div>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        六、违约责任
                    </h2>
                    <p class="mb-3">
                        1.
                        若甲方未按合同约定支付货款，每逾期一天，应向乙方支付逾期付款金额0.05%的违约金。
                    </p>
                    <p class="mb-3">
                        2.
                        若乙方未按合同约定时间交货，每逾期一天，应向甲方支付合同总金额0.05%的违约金。逾期超过15天，甲方有权解除合同并要求乙方赔偿损失。
                    </p>
                    <p>
                        3.
                        若乙方提供的产品与合同约定不符，甲方有权要求乙方更换、退货或减少货款，并可要求乙方承担由此造成的损失。
                    </p>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        七、争议解决
                    </h2>
                    <p>
                        本合同在履行过程中发生的争议，由双方当事人协商解决；协商不成的，任何一方均可依法向甲方所在地人民法院提起诉讼。
                    </p>
                </section>
                <section>
                    <h2
                            class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2 border-gray-200"
                    >
                        八、其他
                    </h2>
                    <p class="mb-3">
                        1.
                        本合同自双方签字盖章之日起生效，有效期至双方履行完毕合同义务之日止。
                    </p>
                    <p class="mb-3">
                        2.
                        本合同未尽事宜，双方可另行签订补充协议，补充协议与本合同具有同等法律效力。
                    </p>
                    <p>3. 本合同一式肆份，甲乙双方各执贰份，具有同等法律效力。</p>
                </section>
            </div>
            <!-- 合同签署区域 -->
            <div class="mt-12 pt-8 border-t border-gray-200">
                <div class="flex flex-col md:flex-row justify-between gap-8">
                    <div class="text-center">
                        <p class="text-gray-500 mb-6">
                            甲方（采购方）：北京科技有限公司
                        </p>
                        <p class="text-gray-500 mt-2">
                            法定代表人（或授权代表人）签字：_______________
                        </p>
                        <p class="text-gray-500 mt-1">
                            日期：
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    2023年09月15日
                  </span>
                        </p>
                    </div>
                    <div class="text-center">
                        <p class="text-gray-500 mb-6">
                            乙方（供应方）：上海电子设备有限公司
                        </p>
                        <p class="text-gray-500 mt-2">
                            法定代表人（或授权代表人）签字：_______________
                        </p>
                        <p class="text-gray-500 mt-1">
                            日期：
                            <span class="bg-highlight px-1 py-0.5 rounded">
                    2023年09月15日
                  </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部状态区域 -->
    <footer
            class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg"
    >
        <div
                class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"
        >
            <div class="flex items-center gap-3">
                <button
                        class="inline-flex items-center px-5 py-2 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary/50"
                        id="submitContractBtn"
                >
                    <i class="fas fa-paper-plane mr-1.5"> </i>
                    提交合同
                </button>
            </div>
            <!-- 驳回原因区域（状态为驳回时显示） -->
            <!-- <div class="bg-red-50 border border-red-100 rounded-lg p-4 w-full md:w-auto md:flex-1 md:max-w-md">
                      <div class="flex">
                          <div class="flex-shrink-0">
                              <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
                          </div>
                          <div class="ml-3">
                              <h3 class="text-sm font-medium text-red-800">驳回原因</h3>
                              <div class="mt-2 text-sm text-red-700">
                                  <p>1. 采购物品数量与实际需求不符，请核实后重新提交。</p>
                                  <p class="mt-1">2. 交货时间未明确，请补充具体交货日期。</p>
                              </div>
                          </div>
                      </div>
                  </div> -->
        </div>
    </footer>
</div>
<!-- 通知提示框 -->
<div
        class="fixed bottom-6 right-6 bg-white rounded-lg shadow-lg p-4 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center max-w-xs z-50"
        id="notification"
>
    <div class="mr-3 text-xl" id="notificationIcon"></div>
    <div>
        <h3 class="font-medium text-gray-800" id="notificationTitle"></h3>
        <p class="text-sm text-gray-500" id="notificationMessage"></p>
    </div>
    <button
            class="ml-4 text-gray-400 hover:text-gray-600"
            id="closeNotification"
    >
        <i class="fas fa-times"> </i>
    </button>
</div>
<script>
    // 页面加载时初始化
            document.addEventListener('DOMContentLoaded', () => {
                // 获取DOM元素
                const downloadPdfBtn = document.getElementById('downloadPdfBtn');
                const backBtn = document.getElementById('backBtn');
                const notification = document.getElementById('notification');
                const notificationIcon = document.getElementById('notificationIcon');
                const notificationTitle = document.getElementById('notificationTitle');
                const notificationMessage = document.getElementById('notificationMessage');
                const closeNotification = document.getElementById('closeNotification');

                // 当前合同状态，实际应用中应从后端获取
                const contractStatus = 'draft'; // draft: 草稿, pending: 待审核, rejected: 已驳回, approved: 已审核

                // 显示通知
                function showNotification(title, message, isSuccess = true) {
                    notificationTitle.textContent = title;
                    notificationMessage.textContent = message;

                    if (isSuccess) {
                        notificationIcon.className = 'fas fa-check-circle text-green-500';
                    } else {
                        notificationIcon.className = 'fas fa-exclamation-circle text-red-500';
                    }

                    notification.classList.remove('translate-y-20', 'opacity-0');
                    notification.classList.add('translate-y-0', 'opacity-100');

                    // 3秒后自动关闭
                    setTimeout(() => {
                        hideNotification();
                    }, 3000);
                }

                // 隐藏通知
                function hideNotification() {
                    notification.classList.remove('translate-y-0', 'opacity-100');
                    notification.classList.add('translate-y-20', 'opacity-0');
                }

                // 下载PDF按钮点击事件
                downloadPdfBtn.addEventListener('click', () => {
                    // 模拟PDF下载
                    showNotification('下载中', '合同PDF正在准备，请稍候...');

                    // 模拟下载延迟
                    setTimeout(() => {
                        showNotification('下载成功', '合同PDF已成功下载到本地', true);
                    }, 1500);
                });

                // 返回按钮点击事件
                backBtn.addEventListener('click', () => {
                    // 根据合同状态判断是否可以返回编辑
                    if (contractStatus === 'draft' || contractStatus === 'rejected') {
                        // 实际应用中应跳转到订单编辑页
                        showNotification('返回编辑', '正在返回订单编辑页面...');

                        // 模拟跳转延迟
                        setTimeout(() => {
                            window.location.href = 'purchaseOrder.html'; // 实际应用中替换为订单编辑页URL
                        }, 1000);
                    } else {
                        // 不可编辑状态，只能返回列表页
                        showNotification('操作提示', '当前合同状态不允许编辑，将返回订单列表', false);

                        // 模拟跳转延迟
                        setTimeout(() => {
                            window.location.href = 'purchaseOrder.html'; // 实际应用中替换为订单列表页URL
                        }, 1000);
                    }
                });

    // 关闭通知按钮点击事件
                closeNotification.addEventListener('click', hideNotification);

                // 点击通知区域外关闭通知
                document.addEventListener('click', (e) => {
                    if (!notification.contains(e.target) && e.target !== downloadPdfBtn && e.target !== backBtn && e.target !== submitContractBtn) {
                        hideNotification();
                    }
                });

                // 提交合同按钮点击事件
                const submitContractBtn = document.getElementById('submitContractBtn');
                submitContractBtn.addEventListener('click', () => {
                    showNotification('提交中', '合同正在提交审核，请稍候...');

                    // 模拟提交延迟
                    setTimeout(() => {
                        showNotification('提交成功', '合同已成功提交审核，将跳转至订单列表', true);

                        // 模拟跳转延迟
                        setTimeout(() => {
                            window.location.href = 'purchaseOrder.html'; // 实际应用中替换为订单列表页URL
                        }, 1500);
                    }, 1500);
                });

                // 为表格行添加悬停效果
                const tableRows = document.querySelectorAll('tbody tr');
                tableRows.forEach(row => {
                    row.addEventListener('mouseenter', () => {
                        row.classList.add('shadow-sm');
                    });
                    row.addEventListener('mouseleave', () => {
                        row.classList.remove('shadow-sm');
                    });
                });
            });
</script>
</body>
</html>
